<template>
	<view class="_format" :style="{
		backgroundColor: background
	}">
		{{ format.toUpperCase() }}
	</view>
</template>

<script setup>
	import {
		computed,
		defineProps
	} from 'vue';
	const props = defineProps({
		format: {
			type: String,
			default: 'other',
			required: true
		},
	})

	const background = computed(()=>{
		if (props.format.indexOf('pdf') > -1) {
			return '#E34D59'
		}
		if (props.format.indexOf('doc') > -1) {
			return '#3A80FC'
		}
		if (props.format.indexOf('xls') > -1) {
			return '#039E55'
		}
		if (props.format.indexOf('ppt') > -1) {
			return '#F34E19'
		}
		if (props.format.indexOf('zip') > -1 || props.format.indexOf('rar') > -1) {
			return '#FF803F'
		}
		return '#989898'
	})
</script>

<style lang="scss" scoped>
	._format {
		padding: 2px 10px;
		border-radius: 12px 2px 12px 2px;
		font-size: 12px;
		font-weight: bolder;
		color: #fff;
	}
</style>